<template>
  <div>
    <a-row>
      <a-col :span="21">
        <a-select :style="{ width: '100%' }" mode="multiple" v-model="curValue" :open="false" @change="changSelect">
          <a-select-option v-for="(item, ind) in dataSource" :key="item.Id" :value="item.Id"
            >{{ item.Name }}/{{ item.Code }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="3">
        <a-button type="primary" @click="open" style="width: 100%; padding: 0 5px">
          <a-icon type="search" />
        </a-button>
      </a-col>
    </a-row>
    <a-modal
      title="物品筛选"
      width="60%"
      :visible="visible"
      :confirmLoading="loading"
      okText="选择"
      @ok="handleChoose"
      @cancel="
        () => {
          this.visible = false
          this.selectedRows = []
          this.selectedRowkeys = []
        }
      "
    >
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="10" style="margin-bottom: 5px">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input allowClear v-model="queryParam.Keyword" placeholder="物品名称\编号" />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-button
                type="primary"
                @click="
                  () => {
                    this.pagination.current = 1
                    this.getDataList()
                  }
                "
                >查询</a-button
              >
              <a-button style="margin-left: 8px" @click="() => ((queryParam = {}), getDataList())">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        :scroll="{ y: scroll }"
        :columns="columns"
        :rowKey="row => row.Id"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'checkbox' }"
        :bordered="true"
        size="small"
      >
        <template slot="dataIndex" slot-scope="text, record, index">
          <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'aId',
    scopedSlots: { customRender: 'dataIndex' },
    width: '50px'
  },
  { title: '物品名称', dataIndex: 'Name' },
  { title: '物品编码', dataIndex: 'Code' },
  { title: '物品规格', dataIndex: 'Spec' },
  { title: '成品编码', dataIndex: 'ProductCode' }
  //   {
  //     title: '物品尺寸(长*宽*高)',
  //     dataIndex: 'Length',
  //     customRender: (text, row) => {
  //       return `${text}*${row.Width}*${row.Height}`
  //     },
  //   },
]
export default {
  props: {
    value: { type: String | Array, required: false },
    datas: { type: Array, required: false }
  },

  data() {
    return {
      curValue: this.value,
      dataSource: this.datas,
      visible: false,
      loading: false,
      pagination: {
        showSizeChanger: true,
        pageSizeOptions: ['25', '50', '100'],
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      data: [],
      columns,
      queryParam: {},
      selectedRows: [],
      selectedRowKeys: [],
      keyids: [],
      rowlist: []
    }
  },
  // mounted() {
  //   this.getDataList()
  // },
  computed: {
    scroll() {
      return Number(document.documentElement.clientHeight) * 0.45
    }
  },
  methods: {
    changSelect(e) {
      console.log(e, '********************')
      this.$emit('input', e)
    },
    open() {
      this.getDataList()
      this.visible = true
    },
    handleChoose() {
      console.log(this.selectedRows)
      console.log(this.selectedRowKeys)
      this.rowlist = [...this.dataSource]
      this.rowlist = [...this.rowlist, ...this.selectedRows]
      this.dataSource = [...Array.from(new Set(this.rowlist))]
      this.keyids = [...this.curValue]
      this.keyids = [...this.keyids, ...this.selectedRowKeys]
      this.curValue = [...Array.from(new Set(this.keyids))]
      // console.log(this.selectedRows[0])
      // var obj = {
      //   selectedRows: this.selectedRows,
      //   index: this.index
      // }
      // this.$emit('rowchange', obj)

      this.$emit('input', this.curValue)
      this.visible = false
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleTableChange(pagination) {
      this.pagination = { ...pagination }
      this.getDataList()
    },
    getDataList() {
      // this.queryParam.OrderId = this.orderId
      this.selectedRows = []
      this.selectedRowKeys = []
      this.loading = true

      this.$http
        .post(`/PB/PB_Material/GetMaterialProductList`, {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: 'Id',
          SortType: 'desc',
          Search: this.queryParam
        })
        .then(resJson => {
          console.log(resJson)
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    }
  }
}
</script>
